
class UserForSave extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            rolelist: [''],
            user : {},
            showCommList : false,
            showCommCount : false
        };
    }

    /* 判断userRoleName是否属于roleName角色或者它的子角色 */
    userHasRole(userRoleName, roleName) {
        if(this.roles[0] == '')
            return false;

        if (userRoleName == roleName)
            return true;

        for (let i = 0; i < this.roles.length; i++) {
            if (this.roles[i].roleName == userRoleName) {
                let parents = this.roles[i].roleParents?this.roles[i].roleParents.split(","):"";
                for (let j = 0; j < parents.length; j++) {
                    if (parents[j] == roleName)
                        return true;
                }
            }
        }
        return false;

    }

    componentDidMount() {
        layui.use(['layer', 'form'], function () {
            let form = layui.form();
            /* 获取所有角色的列表,用于计算角色的父子关系 */
            postJson("/role/getRoleList.x", null, function (data) {
                this.roles = data.data;
                this.refs.roleSelect.init(this.roles);
                form.render();
            }.bind(this));

            /* 假如是修改账号功能，则获取传入的账号信息 */
            if(this.props.modify == 'true'){
                let params = {userCode:this.props.userCode};
                postJson("/user/getUserById.x",$.param(params),function (data) {
                    this.state.user = data.data;
                    this.refs.roleSelect.value = this.state.user.roleName;
                    this.displayExtraInfo(this.state.user.roleName);
                    if(this.userHasRole(this.state.user.roleName,"secLevel")){
                        this.refs.commCount.value = this.state.user.commCount;
                    }
                    separateSelectComm(true,()=>{
                        if(this.userHasRole(this.state.user.roleName,"property")){
                            this.refs.commSelect.value = this.state.user.commCode;
                        }
                        this.setState({user:this.state.user});
                        form.render();
                    });

                }.bind(this));
            }else{
                separateSelectComm(true);
            }

            /* 提交方法的回调注册 */
            form.on("submit(save)",function () {
                this.addUser();
                return false;
            }.bind(this));


        }.bind(this));
    }

    roleSelect(){
        this.displayExtraInfo(this.refs.roleSelect.value);
    }

    displayExtraInfo(userRole){
        this.setState({showCommList:false,showCommCount:false});

        if(this.userHasRole(userRole,"property")) {
            this.setState({showCommList:true});
        }else if(this.userHasRole(userRole,"secLevel")){
            this.state.showCommCount = true;
            this.setState({showCommCount:true});
        }
    }

    addUser() {
        this.state.user.roleName = this.refs.roleSelect.value;
        this.state.user.roleCode = this.refs.roleSelect.roleCode;
        delete this.state.user.commCode;
        delete this.state.user.commCount;

        if(this.userHasRole(this.refs.roleSelect.value,"property")){
            this.state.user.commCode = this.refs.commSelect.value;
        }
        /* 假如是admin_cms角色，需要绑定在0000小区下 */
        else if(this.userHasRole(this.refs.roleSelect.value,"admin_cms")){
            this.state.user.commCode = "0000";
        }else if(this.userHasRole(this.refs.roleSelect.value,"secLevel")){
            this.state.user.commCount = this.refs.commCount.value;
            console.log(this.state.user.commCount);
        }

        postJson("/user/save.x", $.param(this.state.user), (data)=> {
            console.log(data);
            if(this.userHasRole(this.refs.roleSelect.value,"secLevel")){
                layui.layer.confirm("添加二级运营账号成功!是否现在分配小区?", (index) => {
                    layui.layer.close(index);
                    parent.layer.open({
                        type: 2,
                        skin: 'layui-layer-demo', //样式类名
                        closeBtn: 0, //不显示关闭按钮
                        shadeClose: true, //开启遮罩关闭
                        fix: false,
                        offset: '20px',
                        area: ['450px', '600px'],
                        title: '小区分配',
                        content: '/pages/sys_mng/user/assignComm.html?userCode=' + data.data.userCode +'&commCount='+this.refs.commCount.value,
                        success: function (layero, index) {
                            parent.layer.iframeAuto(index);
                        }
                    });
                });
            }else {
                layui.layer.msg("添加账号成功!");
            }
        });
    }

    inputOnChange(){
        this.state.user.logName = this.refs.logName.value;
        this.state.user.userName = this.refs.userName.value;
        console.log(this.state.user);
        this.setState({user:this.state.user});
    }

    cancel(){
        window.history.back();
    }
    render() {
        let showCommList = this.state.showCommList?{}:{display:"none"};
        let showCommCount = this.state.showCommCount?{}:{display:"none"};
        return (
            <div className="box box-primary">
                <div className="box-frame-with-header">
                    <div className="box-header with-border" style={this.props.modify=='true'?{display:"none"}:{}}>
                        <h3 className="box-title">新增账号</h3>
                    </div>
                    <div className="box-body">
                        <form className="layui-form layui-form-pane" action="">
                            <input name="userCode" type="hidden" value={this.state.user.userCode}/>
                            <div className="layui-form-item">
                                <label className="layui-form-label">登录账号</label>
                                <div className="layui-input-inline">
                                    <input name="logName" className="layui-input" type="text" ref="logName"
                                           placeholder="请输入英文" value={this.state.user.logName} onChange={()=>this.inputOnChange()} data-verify="required"/>
                                </div>
                            </div>

                            <div className="layui-form-item">
                                <label className="layui-form-label">中文名称</label>
                                <div className="layui-input-inline">
                                    <input name="userName" className="layui-input" type="text" ref="userName"
                                           placeholder="请输入中文名称" value={this.state.user.userName} onChange={()=>this.inputOnChange()} data-verify="required"/>
                                </div>
                            </div>

                            <div className="layui-form-item">
                                <label className="layui-form-label">所属角色</label>
                                <div className="layui-input-inline">
                                    <RoleListSelect ref="roleSelect" onChange={()=>this.roleSelect()}/>
                                </div>

                                <label className="layui-form-label" style={showCommList}>所属小区</label>
                                <div className="layui-input-inline" style={showCommList}>
                                    <select name="commCode" id="selectSeparateComm" data-filter="selectSeparateComm" ref="commSelect">
                                        <option value="">请选择小区</option>
                                    </select>
                                </div>

                                <label className="layui-form-label" style={showCommCount}>最大小区数目</label>
                                <div className="layui-input-inline" style={showCommCount}>
                                    <input className="layui-input" ref="commCount" defaultValue={0}/>
                                </div>

                            </div>

                            <button className="layui-btn layui-btn-normal" type="button" data-submit data-filter="save">保存</button>
                            <button className="layui-btn" type="button" onClick={()=>this.cancel()}>取消</button>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}

ReactDOM.render(<UserForSave modify={$.query.get("modify")} userCode={$.query.get("userCode")} isSeclevel={parent.hasRoles("secLevel")}/>, document.getElementById("forSave"));